<template>
  <div class="pop-judian" v-if="poptime">
    <div class="cont-bo">
        <div class="top">
            <span class="left" @click="canl">取消</span>
            <span class="right" @click="submit">确定</span>
        </div>
        <mt-picker :slots="slots" @change="onValuesChange"></mt-picker>
    </div>
    <!-- <mt-popup class="pop-div" position="bottom" v-model="popupVisibleTime">
        <mt-picker :slots="slots" @change="onValuesChange"></mt-picker>
    </mt-popup> -->
  </div>
</template>

<script>
import {mapGetters} from "vuex";
export default {
    computed: {
        ...mapGetters([
            'poptime',
        ])
    },
    data() {
        return {
            selectText:'9:00~17:00',
            starttime:'9:00',
            endtime:'17:00',
            slots: [
                {
                flex: 1,
                values: ["7:00","8:00","9:00","10:00"],
                className: 'slot1',
                textAlign: 'right'
                }, {
                divider: true,
                content: '~',
                className: 'slot2'
                }, {
                flex: 1,
                values: ["15:00","16:00","17:00","18:00","19:00","20:00","21:00","22:00"],
                className: 'slot3',
                textAlign: 'left'
                }
            ]
        }
    },
    mounted(){
        
    },
    methods: {
        onValuesChange(picker, values) {
           if(values[0] && values[1]){
                this.selectText = values[0] + '~' + values[1];
            }else if(values[0]){
                this.selectText = values[0] + '~' + this.endtime;
            }else if(values[1]){
                this.selectText = this.starttime + '~' + values[1];
            }
            
        },
        canl(){
            this.$store.dispatch("hidepoptime");
        },
        submit(){
            this.$store.dispatch("hidepoptime");
            this.$emit('selectText',this.selectText);
        }
    }
}
</script>

<style lang="stylus">
.pop-judian
    position fixed
    left 0
    bottom 0
    right 0
    top 0
    z-index 99
    background rgba(0,0,0,0.4)
    .cont-bo
        position absolute
        left 0 
        bottom 0
        height 200px
        width 100%
        z-index 100
        background #fff
    .top
        height: 30px
        font-size: 16px
        line-height: 30px
        padding: 0 15px
        border-bottom: 1px solid #f5f5f5
        .left
            float left
            color #666
        .right
            float right
            color #26a2ff
.picker-center-highlight
    background rgba(0,0,0,0.05);
    color #fff
</style>